<template>
  <view class="container">
    <block v-if="isload">
      <view class="myscore" :style="{ background: t('color1') }">
        <view class="">
          <view class="f1">可用{{ t("积分") }}</view>
          <view class="f2"
            >{{ myscore }}
            <view
              v-if="scoreTransfer"
              class="btn-mini"
              @tap="goto"
              data-url="/pagesExt/my/scoreTransfer"
              >转赠
            </view>
          </view>
        </view>
        <view class="">
          <image
            class="score-jb"
            src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250402/8758c1f0f0ef147eec0ebeb93ae27e8c.png"
            mode=""
          ></image>
        </view>
        <view
          class="relu"
          :style="{ background: t('color2') }"
          @click="goto"
          :data-url="'/pagesExt/my/relu'"
        >
          规则
        </view>
      </view>
      <view
        class="myscore"
        :style="{ background: t('color1') }"
        v-if="scoreWithdraw"
      >
        <view class="f1">允提{{ t("积分") }}</view>
        <view class="f2"
          >{{ myscore2 }}
          <view
            class="btn-mini"
            @tap="goto"
            data-url="/pagesExt/my/scoreWithdraw"
            >提现</view
          >
        </view>
      </view>
      <view class="flex-box">
        <view class="tab-bar">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :style="{ color: currentTagIndex == index ? t('color2') : '' }"
            @click="changeTab(tab.value)"
          >
            {{ tab.label }}
          </view>
        </view>
        <view class="all-box" @click="openTimeFilter">
          {{ timeFilterText }}
          <image
            class="all-down"
            src="/static/img/arrowdown.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="content" id="datalist">
        <block v-for="(item, index) in datalist" :key="index">
          <view class="item">
            <view class="f1">
              <text class="t1">{{ item.remark }}</text>
              <text class="t2">{{ item.createtime }}</text>
            </view>
            <view class="f2">
              <block v-if="item.score > 0">
                <text class="t1">+{{ item.score }}</text>
              </block>
              <block v-else>
                <text class="t2">{{ item.score }}</text>
              </block>
            </view>
          </view>
        </block>
        <nodata v-if="nodata"></nodata>
      </view>
      <nomore v-if="nomore"></nomore>
    </block>
    <view v-if="timeFilterShow" class="popup__container">
      <view class="popup__overlay" @tap.stop="closeTimeFilter"></view>
      <view class="popup__modal">
        <view class="popup__title">
          <view @tap.stop="closeTimeFilter">取消</view>
          <view @tap.stop="confirmTimeFilter">确定</view>
        </view>
        <view
          class="service-item"
          v-for="(item, index) in timeFilterOptions"
          :key="index"
          :style="activeTimeFilterIndex === index ? 'color:' + t('color2') : ''"
          @tap.stop="setActiveTimeFilter(index)"
        >
          {{ item.text }}
        </view>
      </view>
    </view>
    <loading v-if="loading"></loading>
    <dp-tabbar :opt="opt"></dp-tabbar>
    <popmsg ref="popmsg"></popmsg>
  </view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      opt: {},
      loading: false,
      isload: false,
      menuindex: -1,

      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      tabs: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "获取",
          value: "1",
        },
        {
          label: "消耗",
          value: "2",
        },
        {
          label: "退回",
          value: "3",
        },
      ],
      currentTagIndex: 0,
      st: 0,
      datalist: [],
      pagenum: 1,
      myscore: 0,
      myscore2: 0,
      nodata: false,
      nomore: false,
      scoreTransfer: false,
      scoreWithdraw: false,
      popupShow: false,
      timeFilterShow: false,
      timeFilterOptions: [
        {
          text: "全部",
          value: 0,
        },
        {
          text: "近三月",
          value: 1,
        },
        {
          text: "本月",
          value: 2,
        },
      ],
      activeTimeFilterIndex: 0,
      timeFilterText: "全部",
      timestatus: 0,
      selectedItem: null,
      timeFilterText: "全部",
      timestatus: 0,
    };
  },

  onLoad: function (opt) {
    this.opt = app.getopts(opt);
    this.getscoreset();
    this.getdata();
  },
  onPullDownRefresh: function () {
    this.getscoreset();
    this.getdata();
  },
  onReachBottom: function () {
    if (!this.nodata && !this.nomore) {
      this.pagenum = this.pagenum + 1;
      this.getdata(true);
    }
  },
  methods: {
    openTimeFilter() {
      this.timeFilterShow = true;
    },

    // 关闭时间筛选弹窗
    closeTimeFilter() {
      this.timeFilterShow = false;
    },

    // 设置当前选中的时间筛选项
    setActiveTimeFilter(index) {
      this.activeTimeFilterIndex = index;
    },

    // 确认时间筛选，并重新加载数据
    confirmTimeFilter() {
      const selectedOption = this.timeFilterOptions[this.activeTimeFilterIndex];
      this.timeFilterText = selectedOption.text; // 更新显示文本
      this.timestatus = selectedOption.value; // 更新接口参数
      this.timeFilterShow = false; // 关闭弹窗

      // 重新加载数据（重置页码并请求）
      this.pagenum = 1;
      this.getdata(false);
    },
    getscoreset() {
      var that = this;
      app.get("MemberCenter/getscoreset", {}, function (res) {
        if (res.code == 200) {
          that.myscore = res.res.score;
        } else {
          app.error(res.mgs);
        }
      });
    },

    getdata(loadmore) {
      if (!loadmore) {
        this.pagenum = 1;
        this.datalist = [];
      }
      const that = this;
      const { pagenum, st, timestatus } = that;

      that.nodata = false;
      that.nomore = false;
      that.loading = true;

      app.get(
        "MemberCenter/getscorelist",
        {
          status: st,
          pagenum: pagenum,
          pagelimit: 10,
          timestatus: timestatus, // 使用选择的 timestatus
        },
        function (res) {
          that.loading = false;
          const data = res.res;

          if (pagenum == 1) {
            that.scoreTransfer = res.scoreTransfer;
            that.scoreWithdraw = res.scoreWithdraw;
            that.datalist = data;

            if (data.length == 0) {
              that.nodata = true;
            }
            that.loaded();
          } else {
            if (data.length == 0) {
              that.nomore = true;
            } else {
              const newdata = that.datalist.concat(data);
              that.datalist = newdata;
            }
          }
        }
      );
    },
    changeTab(index) {
      this.currentTagIndex = index;
      this.st = this.tabs[index].value; // 同步接口参数
      this.getdata(false); // 重新加载数据
    },
  },
};
</script>
<style>
.myscore {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 70rpx 100rpx 70rpx 50rpx;
}

.tab-bar {
  width: 80%;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
}

.relu {
  position: absolute;
  right: 0;
  bottom: 60rpx;
  border-top-left-radius: 36rpx;
  border-bottom-left-radius: 36rpx;
  color: #fff;
  padding: 10rpx 14rpx;
}

.score-jb {
  width: 140rpx;
  height: 140rpx;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
    /* 初始位置 */
  }

  50% {
    transform: translateY(-20rpx);
    /* 向上移动20px */
  }

  100% {
    transform: translateY(0);
    /* 返回初始位置 */
  }
}

.myscore .f1 {
  margin-bottom: 10rpx;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24rpx;
}

.myscore .f2 {
  color: #fff;
  font-size: 44rpx;
  font-weight: bold;
  position: relative;
}

.flex-box {
  display: flex;
}

.dd-tab {
  width: 80%;
}

.all-box {
  width: 20%;
  background-color: #fff;
  text-align: right;
  padding-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #888;
}

.all-down {
  width: 30rpx;
  height: 30rpx;
}

.content {
  width: 94%;
  margin: 0 3%;
}

.popup__title {
  padding: 30rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  margin-bottom: 60rpx;
}

.content .item {
  width: 100%;
  margin: 20rpx 0;
  background: #fff;
  border-radius: 5px;
  padding: 20rpx 20rpx;
  display: flex;
  align-items: center;
}

.content .item .f1 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content .item .f1 .t1 {
  color: #000000;
  font-size: 30rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content .item .f1 .t2 {
  color: #666666;
}

.content .item .f1 .t3 {
  color: #666666;
}

.content .item .f2 {
  flex: 1;
  font-size: 36rpx;
  text-align: right;
}

.content .item .f2 .t1 {
  color: #03bc01;
}

.content .item .f2 .t2 {
  color: #000000;
}

.content .item .f3 {
  flex: 1;
  font-size: 32rpx;
  text-align: right;
}

.content .item .f3 .t1 {
  color: #03bc01;
}

.content .item .f3 .t2 {
  color: #000000;
}

.data-empty {
  background: #fff;
}

.btn-mini {
  right: 32rpx;
  top: 28rpx;
  width: 100rpx;
  height: 50rpx;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 10rpx;
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.service-item {
  padding: 30rpx 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.service-item:last-child {
  border: none;
}
</style>
